<template>
  <div class="con_right">
    <el-form style="margin:20px 0 0 30px;">
      <el-row :span="24">
        <el-form-item label="开发区名称" >
          <el-select v-model="form.developArea" placeholder="" >
            <el-option v-for="item in kfqlist" :key="item.develop" :label="item.develop" :value="item.develop" />
          </el-select>
        </el-form-item>
 
      </el-row>
    </el-form>
    <div style="position: relative">
    </div>
    <div  v-for="(item,index) in list2" :key="index" @click="goassess(item)" style="width: 390px;height: 120px;border-radius: 8px;border: 1px solid #d8d8d8;margin: 20px 20px 20px 40px;display: inline-block;position: relative;position: relative;">
      <el-checkbox v-model="item.state" label="" size="large" style="position: absolute;right: 10px" v-if="show" />
      <div style="width: 90%;height: 50px;font-size:14px;padding: 5px" >
        <div style="color: #484848;margin: 5px;overflow: hidden;white-space: nowrap">{{item.name}}</div>
      </div>
      <div style="height: 50px;background: #f5f5f5;font-size:14px;padding: 5px">
        <div style="color: #484848;margin: 5px">上报时间：{{item.updateTime}}</div>
        <div style="color: #858585;margin-left: 5px">审核时间：{{item.checkTime}}</div>
      </div>

      <el-button type="primary" style="position: absolute;bottom: 10px;right: 10px" @click.stop="download(item)">导出</el-button>
    </div>
    <el-button type="primary" style="position: fixed;bottom: 50px;right: 50px" v-if="show" @click="remove">移到回收站</el-button>
  </div>
  <el-dialog
      v-model="dialogVisible1"
      title="新建文件夹"
      width="30%"
      :before-close="handleClose"
  >
    <el-form ref="ruleFormRef"  :model="form1" label-width="80px">
      <el-form-item label="名称" >
        <el-input v-model="form1.name" autocomplete="off" style="width: 300px" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addFloderList()">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogVisible2"
      title="新建表单"
      width="50%"
      :before-close="handleClose"
  >
    <el-form ref="ruleFormRef"  :model="form1" label-width="100px">
      <el-form-item label="表单名称" >
        <el-input v-model="form1.name" autocomplete="off" style="width: 300px" />
      </el-form-item>
      <el-form-item label="选择模板" >
        <el-radio-group v-model="form1.radio1" class="ml-4">
          <el-radio label="2021" size="large">2021国家级经济技术开发区综合发展水平考核评价体系</el-radio>
          <el-radio label="2020" size="large">2020国家级经济技术开发区综合发展水平考核评价体系</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开发区名称" >
        <el-input v-model="form1.developArea" autocomplete="off" style="width: 300px" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="sureSelect()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


  <el-dialog
      v-model="dialogVisible3"
      title="无流程表单"
      width="50%"
      :before-close="handleClose"
  >
    <div @click="pitchOn(item,index)" v-for="(item,index) in list3" :class="active === index?'activeClass':''" :key="index" style="width: 370px;height: 120px;border-radius: 8px;border: 1px solid #d8d8d8;margin: 20px 20px 20px 40px;display: inline-block;position: relative">
      <div style="width: 100%;height: 50px;font-size:14px;padding: 5px">
        <div style="color: #484848;margin: 5px;overflow: hidden;white-space: nowrap">{{item.name}}({{item.templateType}})</div>
<!--        <div style="color: #858585;margin-left: 5px">{{item.info.time}}</div>-->
      </div>
      <div style="height: 50px;background: #f5f5f5;font-size:14px;padding: 5px">
        <div style="color: #484848;margin: 5px">上报时间：{{item.updateTime}}</div>
        <div style="color: #858585;margin-left: 5px">审核时间：{{item.checkTime}}</div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="sureSelect1()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref,onMounted,reactive,h } from "vue"
import {
  reportNum,
  reportFindAllFolder,
  saveFloder,
  reportRecyclem,
  reportgetEdit, statisticalfindList, getAllTB, statisticalexport
} from "@/util/api";

import {ElMessageBox,ElNotification} from "element-plus";
import  {useRouter} from "vue-router";
import { useStore } from '@/store'
const router = useRouter();
const list:any = ref({})
const list1:any = ref({})
const list2:any = ref([])
const list3:any = ref([])
const active:any = ref("")
const show = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
const dialogVisible3 = ref(false)
const id:any = ref(0)
const radio1:any = ref(0)
const kfqlist:any = ref([])

const form1 = reactive({
  name:'',
  radio1:'',
  developArea:'',
  folder:''
})

const getkfq = () =>{
  getAllTB("").then((res:any)=>{
    kfqlist.value = res.data
  })
}

const store = useStore()
const goassess = (val:any) =>{
  // console.log(1)
  if(store.state.userInfo.userRole == '3'){
    console.log(val)
    router.push({
      path:'./addfloderz',
      query:{
        id:val.id,
        radio1:val.templateId,
      }
    })
  }
  else{
    router.push({
      path:'./addfloderz',
      query:{
        id:val.id,
        radio1:val.templateId,
        shState:val.checkInfoList[0].shState
      }
    })
  }
}


// const handleExcelExport = fileName => {
//   if (!fileName || typeof fileName !== 'string') {
//     fileName = 'ExcelExport.xlsx';
//   }
//   exportExcel(tableData.value, fileName);
// };

//接口

const sureSelect1 =() =>{
  router.push({
    path:'./addfloderz',
    query:{
      id:id.value,
      radio1:radio1.value
    }
  })
}

const opendia = () =>{
  dialogVisible3.value = true
  id.value = ""
  active.value = ""
}

const pitchOn = (arr:any,val:any) => {
  id.value = arr.id
  radio1.value = arr.templateId
  active.value = val
}


const handleFileError = (res:any, fileName:any) => {
  if (typeof res.data !== 'undefined') {
    if (res.data.type === 'application/json') {
      const reader = new FileReader();
      reader.onload = function () {
        // const message = JSON.parse(reader.result).msg;

      };
      reader.readAsText(new Blob([res.data]));
    }
  } else {
    var downloadUrl = window.URL.createObjectURL(new Blob([res]));
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = downloadUrl;
    a.download = fileName;
    var event = new MouseEvent('click');
    a.dispatchEvent(event);
  }

};


const getNoLC = () =>[
  reportgetEdit("").then((res:any)=>{
    list3.value = res.data
  })
]





const form = reactive({
  developArea:'',
  templateType:'',
  rState:'',
  state:'1'
})

const gldelete = () =>{
  show.value = true
}

const download = (item:any) =>{
  // let arr1 = list2.value
  // let arr2 = []
  // for (let i=0;i<arr1.length;i++){
  //   if(arr1[i].state == true){
  //     arr2.push(arr1[i])
  //   }
  // }
  // if(arr2.length>1){
  //   ElNotification({
  //     title: '提示',
  //     message: h('i', { style: 'color: teal' }, '下载只能选择一个'),
  //   })
  //   return false
  // }
  // let name = arr2[0].name
  statisticalexport(item.id).then((res:any)=>{
    let fileName = item.name + ".xlsx"

    handleFileError(res,fileName)
  })
}



const remove = () =>{
  let arr1 = list2.value
  let arr2 = []
  for (let i=0;i<arr1.length;i++){
    if(arr1[i].state == true){
      arr2.push(arr1[i].id)
    }
  }
  let data = {
    idList:arr2,
    state:2
  }
  reportRecyclem(data).then((res:any)=>{
    getuserNum()
    reportFindAll()
    getAll()

  })
}


onMounted(() => {
  getuserNum()
  reportFindAll()
  getAll()
  getNoLC()
  getkfq()
})
const getAll = () =>{

  statisticalfindList(form).then((res:any)=>{
    list2.value = res.data
    var arr = list2.value
    for (let i=0;i<arr.length;i++){
      arr[i].info = JSON.parse(arr[i].info)
      arr[i].state = false
    }
  })
}


const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭弹窗?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

const sureSelect = () =>{

  if(form1.name !='' && form1.radio1 != ""){
    sessionStorage.setItem("con",JSON.stringify(form1))
    router.push({
      path:'/addfloderz',
      query:form1
    })
    dialogVisible2.value = false
  }else{
    ElNotification({
      title: '提示',
      message: h('i', { style: 'color: teal' }, '表单名称或模板不能为空'),
    })
  }


}

const reportFindAll = () =>{
  let data:any = ''
  reportFindAllFolder(data).then((res:any)=>{
    list1.value = res.data
  })
}

const addFloderList = () =>{
  saveFloder(form1).then((res)=>{
    dialogVisible1.value = false
    reportFindAll()
  })
}


const getuserNum = () => {
  let data:any = ''
  reportNum(data).then((res:any)=>{
    list.value = res.data
    // let list1 = list.value
    // for (let i=0;i<list1.length;i++){
    //   if(list1[i].name == "全部成员"){
    //     num.value = list1[i].num
    //     list1.splice(i,1)
    //   }
    // }
  })

}

</script>

<style scoped>
.activeClass{
  border: 1px solid blue !important;
  /*background: red;*/
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
:deep.el-pagination{
  float: right;
  margin-right: 20px;
}
/*.con_left{*/
/*  width: 13%;*/
/*  min-height: 95vh;*/
/*  background: #f5f5f5;*/
/*  display: inline-block;*/
/*  vertical-align: middle;*/
/*  color: #858585;*/
/*  box-shadow: 0 6px 8px 0 rgba(0,0,0,0.06);*/
/*}*/
.con_right{
  width: 100%;
  min-height: 95vh;
  background: #fff;
  vertical-align: middle;
  display: inline-block;
}
</style>
